<template>
  <div class="map">
    <van-nav-bar title="地图找房" left-arrow @click-left="onClickLeft"/>
    <div id="container"></div>
    <!-- 房屋列表 -->
    <div :class="['houseList',isShow?'show':'']">
      <div class="titleWrap">
        <h1 class="listTitle">房屋列表</h1>
        <div class="titleMore" @click="$router.push('/home/list')">更多房源</div>
      </div>
      <div class="houseItems">
        <house-item v-for="item in houseList" :item="item" :key="item.houseImg"></house-item>
      </div>
    </div>
  </div>
</template>

<script>
import { getCity } from "../utils/index.js";
import { request, url } from "../utils/index.js";
import { log } from "util";
import HouseItem from "../components/HouseItem";
const BMapGL = window.BMapGL;
const labelStyle = {
  cursor: "pointer",
  border: "0px solid rgb(255, 0, 0)",
  padding: "0px",
  whiteSpace: "nowrap",
  fontSize: "12px",
  color: "rgb(255, 255, 255)",
  textAlign: "center"
};
export default {
  components: {
    HouseItem
  },
  data: () => {
    return {
      currentCity: null,
      map: null,
      level: 1,
      houseList: [
        {
          houseImg: "/newImg/7bi5je48i.jpg",
          title: "小区两房，靠山舒适安静，通风好",
          tags: ["近地铁"],
          price: 4700,
          desc: "二室/109/东/花半里别馆",
          houseCode: "5cc4a06b1439630e5b4fcdfa"
        }
      ],
      url: url,
      isShow: false
    };
  },
  async mounted() {
    this.currentCity = await getCity();
    // 创建地图
    await this.creactMap();
    // 渲染覆盖物
    this.renderOverlay(this.currentCity);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 创建地图
    creactMap() {
      var map = new BMapGL.Map("container");
      this.map = map;
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(scaleCtrl);
      map.addControl(zoomCtrl);
      //创建地址解析器实例
      var myGeo = new BMapGL.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(
        this.currentCity.label,
        function(point) {
          if (point) {
            map.centerAndZoom(point, 11);
          } else {
            alert("您选择的地址没有解析到结果！");
          }
        },
        this.currentCity.label
      );
      map.addEventListener("movestart", () => {
        this.isShow = false;
      });
    },
    // 渲染覆盖物
    async renderOverlay(value) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      const res = await request.get("/area/map", {
        params: {
          id: value.value
        }
      });
      if (this.level === 1 || this.level === 2) {
        this.renderCircle(res.data.body);
      } else {
        this.renderRectangle(res.data.body);
      }
      this.$toast.clear();
    },
    // 渲染1,2级覆盖物
    renderCircle(list) {
      console.log(list);
      list.forEach(item => {
        var point = new BMapGL.Point(item.coord.longitude, item.coord.latitude);
        var label = new BMapGL.Label("", {
          // 创建文本标注
          position: point,
          offset: new BMapGL.Size(-35, -35)
        });
        // 自定义文本标注样式
        label.setContent(`<div class="bubble">
            <p class= "name1"> ${item.label}</p >
            <p>${item.count}套</p>
    </div > `);
        label.setStyle(labelStyle);
        this.map.addOverlay(label); // 将标注添加到地图中
        label.addEventListener("click", () => {
          this.map.clearOverlays();
          var point = new BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          );
          if (this.level === 1) {
            this.map.centerAndZoom(point, 13);
          } else {
            this.map.centerAndZoom(point, 15);
          }
          this.level++;
          this.renderOverlay(item);
        });
      });
    },
    // 渲染三级覆盖物
    renderRectangle(list) {
      console.log(list);
      list.forEach(item => {
        var point = new BMapGL.Point(item.coord.longitude, item.coord.latitude);
        var label = new BMapGL.Label("", {
          // 创建文本标注
          position: point,
          offset: new BMapGL.Size(-50, -28)
        });
        // 自定义文本标注样式
        label.setContent(`
    <div class="rect">
      <span class="housename">${item.label}</span>
      <span class="housenum">${item.count}套</span>
      <i class="arrow"></i>
    </div>
  `);
        label.setStyle(labelStyle);
        this.map.addOverlay(label); // 将标注添加到地图中
        label.addEventListener("click", () => {
          var point = new BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          );
          this.map.centerAndZoom(point, 15);
          this.getHouseList(item);
        });
      });
    },
    // 获取小区房屋列表
    async getHouseList(item) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      const res = await request.get("/houses", {
        params: { cityId: item.value }
      });
      this.$toast.clear();
      console.log(res);
      this.map.panBy(0, -120);
      this.houseList = res.data.body.list;
      this.isShow = true;
    }
  }
};
</script>
<style lang="less" scoped>
#container,
.map {
  height: 100%;
}
/deep/ .van-nav-bar {
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  .van-icon {
    color: #5e5e5e;
  }
}
.housename {
  display: inline-block;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.housenum {
  display: inline-block;
  width: 20px;
}

/* 房源列表样式： */
.houseList {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 330px;
  transition: all 1s;
  transform: translate3d(0, 330px, 0);
  background: #fff;
}

.show {
  transform: translate3d(0, 0, 0);
}

.titleWrap {
  position: relative;
  width: 100%;
  background: #c0c0c2;
  border-top: 1px solid #c8c8c8;
}

.listTitle {
  display: inline-block;
  padding-left: 10px;
  line-height: 43px;
  font-size: 16px;
  color: #1e1e1e;
  vertical-align: middle;
}

.titleMore {
  float: right;
  padding-right: 15px;
  line-height: 43px;
  font-size: 13px;
  color: #494949;
  vertical-align: middle;
}

.titleMore:visited {
  text-decoration: none;
}

.houseItems {
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 45px;
  overflow: auto;
  height: 287px;
}
</style>
